<template>
    <div>
        <myheader></myheader>
        <br><br>
        <!-- 面包屑 -->
        <Breadcrumb :datas="datas"></Breadcrumb>
        <section class="featured-block text-center">
		<div class="container">


            <table>
                <tr style="padding:5px">
                    <td>用户名：</td>
                    <td style="padding:5px">
                        <input type="text" v-model="username">
                    </td>
                </tr>
                <br>
                
                <tr>
                    <td style="padding:5px">密码：</td>
                    <td style="padding:5px">
                        <input type="password" v-model="password">
                    </td>
                </tr>
                

                <tr> 
                     <td style="padding:5px"></td>
                    <td style="padding:5px">
                        <!-- 滑块验证码 -->
                        <drag-verify :width="width" :height="height" :text="text"  ref="Verify"           >

                        </drag-verify>
                    </td>
                </tr>
                 <tr>
                   
                     <td style="padding:5px"></td>
                    
                    <td style="padding:5px">
                        <Button @click="logins">登录</Button> &nbsp;&nbsp;
                    
                        <img @click="dingding" src="http://127.0.0.1:8000/static/dingding.png" alt="">
                    </td>
                </tr>
            </table>


        








        </div>
	    </section>

    <myfooter></myfooter>
    


    </div>
  
</template>

<script>
import myheader from './myheader.vue'
import myfooter from './myfooter.vue'
import {config,formatXml} from '../config.js'


// 导入滑动模块
import dragVerify from 'vue-drag-verify'

export default {
    data(){
        return{
            //声明面包屑导航
            datas:[{title:'首页',route:{name:'index'}},{title:'登录页面'}],
            username:"",
            password:"",
            //滑块验证码
            text:"请将欢快拖动到右侧",
            width:200,
            height:40

        }
    },
    //定义组件
    components:{
        'myheader':myheader,
        'myfooter':myfooter,
        //定义滑动模块
        'dragVerify':dragVerify
    },
    
    methods:{
        //钉钉登录
        dingding(){
            var appid = 'dingoaukgkwqknzjvamdqh'
            var redirect_uri = 'http://localhost:8000/dingding_back/';

            var url = 'https://oapi.dingtalk.com/connect/qrconnect?appid='+appid+'&response_type=code&scope=snsapi_login&state=STATE&redirect_uri='+redirect_uri;
            window.location.href = url;
            
        },
       
        logins:function(){
            //验证后台是否拖动
            console.log(this.$refs.Verify.isPassing);
            if(this.$refs.Verify.isPassing == false){
                this.$Message("请拖动验证码")
                return false

            }

            if(this.username == ""){
                this.$Message('用户名不能为空')
                return false
            }
            if(this.password == ""){
                this.$Message('密码不能为空')
                return false
            }

            //发送请求
            this.axios({
                url:"http://127.0.0.1:8000/login/",
                params:{
                    username:this.username,
                    password:this.password
                }
            }).then(resp => {
                if(resp.data.code == 200){
                    //将用户名和id存储到localstorage
                    localStorage.setItem('username',resp.data.username)
                    localStorage.setItem('uid',resp.data.uid)

                    // 如果正确，则重定向到首页
                    this.$router.push({ path: "/" });

                    
                    

                }else{
                    this.$Message(resp.data.message);
                    console.log(resp)
                }
            })

        }
    }
    


}
</script>

<style>

</style>